<template>
  <el-container>
    <el-header>
      <h1>XXXX管理系统</h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            router
        >
          <el-sub-menu :index="menu.id + ''" :key="menu.id" v-for="menu in menuList">
            <template #title>
              <el-icon>
                <component :is="menu.icon"></component>
              </el-icon>
              <span>{{menu.name}}</span>
            </template>
            <el-menu-item :index="item.link" :key="item.id" v-for="item in menu.subMenuList">
              {{item.name}}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>

import {findMenu} from "../api/menu.js";

export default {
  name: "index",
  data(){
    return{
      menuList:[
        {id:1,name:'用户管理',link:'/user',icon:'Plus',
          subMenuList:[
            {id:3,name:'用户添加',link:'/user/add'},
            {id:4,name:'用户修改',link:'/user/update'},
          ]
        },
        {id:2,name:'档案管理',link:'/doc',icon:'Aim'}
      ],
    }
  },
  methods:{
    handleOpen(){

    },
    handleClose(){

    },
    async loadData(){
      let {data:data} = await findMenu(1)
      console.log(data)
      this.menuList = data.data
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
el-header{
  text-align: center;
}
</style>